<template>
  <div class="help-container">
    <el-row :gutter="20">
      <!-- 左侧导航 -->
      <el-col :span="6">
        <el-card class="help-nav">
          <template #header>
            <div class="card-header">
              <h2>帮助中心</h2>
            </div>
          </template>
          <el-menu :default-active="activeIndex" class="help-menu" @select="handleSelect">
            <el-menu-item index="faq">
              <el-icon>
                <QuestionFilled />
              </el-icon>
              <span>常见问题</span>
            </el-menu-item>
            <el-menu-item index="shopping">
              <el-icon>
                <ShoppingCart />
              </el-icon>
              <span>购物指南</span>
            </el-menu-item>
            <el-menu-item index="payment">
              <el-icon>
                <Wallet />
              </el-icon>
              <span>支付方式</span>
            </el-menu-item>
            <el-menu-item index="shipping">
              <el-icon>
                <Van />
              </el-icon>
              <span>配送方式</span>
            </el-menu-item>
            <el-menu-item index="return">
              <el-icon>
                <RefreshRight />
              </el-icon>
              <span>退换货政策</span>
            </el-menu-item>
            <el-menu-item index="contact">
              <el-icon>
                <Service />
              </el-icon>
              <span>联系客服</span>
            </el-menu-item>
          </el-menu>
        </el-card>
      </el-col>

      <!-- 右侧内容 -->
      <el-col :span="18">
        <el-card class="help-content">
          <!-- 常见问题 -->
          <div v-if="activeIndex === 'faq'">
            <h2>常见问题</h2>
            <el-collapse accordion>
              <el-collapse-item v-for="(item, index) in faqList" :key="index" :title="item.question">
                <div class="faq-answer">{{ item.answer }}</div>
              </el-collapse-item>
            </el-collapse>
          </div>

          <!-- 购物指南 -->
          <div v-if="activeIndex === 'shopping'">
            <h2>购物指南</h2>
            <div class="help-section">
              <h3>注册与登录</h3>
              <p>您可以通过首页右上角的"登录"按钮进入登录页面，如果您还没有账号，可以点击注册按钮创建一个新账号。</p>

              <h3>浏览商品</h3>
              <p>您可以通过首页的分类导航、搜索框或品牌专区浏览商品。点击商品卡片可以查看商品详情。</p>

              <h3>加入购物车</h3>
              <p>在商品详情页，您可以选择商品数量，然后点击"加入购物车"按钮将商品添加到购物车。</p>

              <h3>结算订单</h3>
              <p>在购物车页面，您可以调整商品数量，然后点击"去结算"按钮进入订单确认页面。填写收货信息并选择支付方式后，点击"提交订单"完成购买。</p>
            </div>
          </div>

          <!-- 支付方式 -->
          <div v-if="activeIndex === 'payment'">
            <h2>支付方式</h2>
            <div class="help-section">
              <h3>在线支付</h3>
              <p>我们支持以下在线支付方式：</p>
              <ul>
                <li>支付宝</li>
                <li>微信支付</li>
                <li>银联在线支付</li>
                <li>信用卡支付</li>
              </ul>

              <h3>货到付款</h3>
              <p>部分地区支持货到付款服务，您可以在收到商品后再支付货款。</p>

              <h3>优惠券和积分</h3>
              <p>您可以在结算时使用优惠券或积分抵扣部分金额。</p>
            </div>
          </div>

          <!-- 配送方式 -->
          <div v-if="activeIndex === 'shipping'">
            <h2>配送方式</h2>
            <div class="help-section">
              <h3>配送范围</h3>
              <p>我们的配送服务覆盖全国大部分地区，包括港澳台地区。</p>

              <h3>配送时间</h3>
              <p>正常情况下，订单会在1-3个工作日内发货，发货后1-5天送达（具体时间取决于您的收货地址）。</p>

              <h3>配送费用</h3>
              <p>单笔订单满99元免运费，不满99元收取10元运费。</p>

              <h3>物流查询</h3>
              <p>订单发货后，您可以在"我的订单"页面查看物流信息。</p>
            </div>
          </div>

          <!-- 退换货政策 -->
          <div v-if="activeIndex === 'return'">
            <h2>退换货政策</h2>
            <div class="help-section">
              <h3>7天无理由退换</h3>
              <p>自收到商品之日起7天内，您可以申请无理由退换货。商品需保持原包装、配件齐全且未使用状态。</p>

              <h3>质量问题退换</h3>
              <p>如果商品存在质量问题，您可以在收到商品后15天内申请退换货。</p>

              <h3>退换货流程</h3>
              <ol>
                <li>在"我的订单"页面找到对应订单，点击"申请退换货"</li>
                <li>选择退换货原因并上传相关凭证</li>
                <li>等待客服审核（1-3个工作日）</li>
                <li>审核通过后，按照指引寄回商品</li>
                <li>商品验收无误后，退款将在1-7个工作日内原路返回</li>
              </ol>

              <h3>不支持退换的情况</h3>
              <ul>
                <li>超过退换货期限</li>
                <li>商品已使用、损坏或缺少配件</li>
                <li>个人定制类商品</li>
                <li>特价清仓商品（页面有标注）</li>
              </ul>
            </div>
          </div>

          <!-- 联系客服 -->
          <div v-if="activeIndex === 'contact'">
            <h2>联系客服</h2>
            <div class="help-section">
              <h3>在线客服</h3>
              <p>工作时间：9:00-22:00</p>
              <el-button type="primary" @click="openChat">
                <el-icon>
                  <ChatDotRound />
                </el-icon>
                在线咨询
              </el-button>

              <h3>客服热线</h3>
              <p>400-123-4567（工作时间：9:00-18:00，节假日照常）</p>

              <h3>电子邮件</h3>
              <p>service@example.com（一般在24小时内回复）</p>

              <h3>意见反馈</h3>
              <el-form :model="feedbackForm" label-width="80px">
                <el-form-item label="问题类型">
                  <el-select v-model="feedbackForm.type" placeholder="请选择问题类型">
                    <el-option label="商品相关" value="product" />
                    <el-option label="订单相关" value="order" />
                    <el-option label="物流相关" value="shipping" />
                    <el-option label="售后相关" value="service" />
                    <el-option label="网站建议" value="suggestion" />
                    <el-option label="其他" value="other" />
                  </el-select>
                </el-form-item>
                <el-form-item label="反馈内容">
                  <el-input v-model="feedbackForm.content" type="textarea" rows="4" placeholder="请详细描述您的问题或建议" />
                </el-form-item>
                <el-form-item label="联系方式">
                  <el-input v-model="feedbackForm.contact" placeholder="请留下您的手机号或邮箱，方便我们回复" />
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="submitFeedback">提交反馈</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import {
  QuestionFilled,
  ShoppingCart,
  Wallet,
  Van,
  RefreshRight,
  Service,
  ChatDotRound
} from '@element-plus/icons-vue'

const activeIndex = ref('faq')

// 常见问题列表
const faqList = ref([
  {
    question: '如何注册账号？',
    answer: '点击网站右上角的"登录"按钮，在登录页面点击"注册"，填写相关信息即可完成注册。'
  },
  {
    question: '忘记密码怎么办？',
    answer: '在登录页面点击"忘记密码"，通过绑定的手机号或邮箱进行验证后重置密码。'
  },
  {
    question: '下单后多久发货？',
    answer: '正常情况下，我们会在1-3个工作日内发货。特殊情况（如节假日、预售商品等）可能会有所延迟，具体以订单页面显示为准。'
  },
  {
    question: '如何查询订单状态？',
    answer: '登录账号后，点击"我的订单"即可查看所有订单的状态和物流信息。'
  },
  {
    question: '如何申请退换货？',
    answer: '在"我的订单"页面找到对应订单，点击"申请退换货"按钮，填写相关信息并上传凭证，等待客服审核。'
  },
  {
    question: '优惠券如何使用？',
    answer: '在结算页面可以选择使用符合条件的优惠券。请注意查看优惠券的使用条件和有效期。'
  },
  {
    question: '积分如何获取和使用？',
    answer: '购物可获得积分，积分可在结算时抵扣部分金额。具体获取和使用规则可在"个人中心-积分管理"中查看。'
  }
])

// 切换菜单
const handleSelect = (index) => {
  activeIndex.value = index
}

// 打开在线客服聊天窗口
const openChat = () => {
  ElMessage.info('在线客服功能开发中，敬请期待！')
}

// 意见反馈表单
const feedbackForm = ref({
  type: '',
  content: '',
  contact: ''
})

// 提交反馈
const submitFeedback = () => {
  if (!feedbackForm.value.type) {
    ElMessage.warning('请选择问题类型')
    return
  }

  if (!feedbackForm.value.content) {
    ElMessage.warning('请填写反馈内容')
    return
  }

  if (!feedbackForm.value.contact) {
    ElMessage.warning('请填写联系方式')
    return
  }

  // 模拟提交
  ElMessage.success('感谢您的反馈，我们会尽快处理！')

  // 重置表单
  feedbackForm.value = {
    type: '',
    content: '',
    contact: ''
  }
}
</script>

<style scoped>
.help-container {
  padding: 20px;
}

.help-nav,
.help-content {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}

.help-menu {
  border-right: none;
}

.help-content h2 {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 22px;
  font-weight: 600;
  padding-bottom: 10px;
  border-bottom: 1px solid #ebeef5;
}

.help-section {
  margin-bottom: 30px;
}

.help-section h3 {
  font-size: 18px;
  margin-top: 20px;
  margin-bottom: 10px;
  font-weight: 500;
}

.help-section p,
.help-section ul,
.help-section ol {
  color: #606266;
  line-height: 1.6;
  margin-bottom: 15px;
}

.help-section ul,
.help-section ol {
  padding-left: 20px;
}

.help-section li {
  margin-bottom: 5px;
}

.faq-answer {
  color: #606266;
  line-height: 1.6;
  padding: 10px 0;
}

/* 深色模式适配 */
html.dark .help-section p,
html.dark .help-section ul,
html.dark .help-section ol,
html.dark .faq-answer {
  color: #e5eaf3;
}
</style>